<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情 - {$config.WEB_SITE_TITLE}</title>
    <script src="__PUBLIC__/Home/js/adaptive.js"></script>
    <script src="__PUBLIC__/Home/js/device.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/reset.css">
    <script src="__PUBLIC__/Home/js/mui.min.js"></script>
    <link href="__PUBLIC__/Home/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/swiper-3.4.2.min.css">

    <style>
        h4,h5{margin-top: 0px;margin-bottom: 0px;}
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #9B9B9B;font-size: 0.32rem;
        }
        html{background: #EEEEEE;touch-action: none;font-family: "微软雅黑"}
        .content{width: 7.5rem;height: auto;margin: 0 auto;background: #f5f5f5;}
        .top{width: 100%;height: auto;text-align: center;position: relative;}
        .top h4{width: 100%;height: 0.88rem;text-align: center;position: relative;background: #01B0B8;color: #fff;line-height: 0.88rem;}
        .top .back{width: 0.3rem;height: 0.4rem;;position: absolute;left: 0.3rem;top:0.24rem;z-index: 100}
        .top img{width: 100%;height: 4.14rem;}


        .center{width: 100%;height: 4.5rem;padding: 0.33rem;position: relative;background: #fff;}
        .center  .title{width: 100%;height: 0.8rem;display: inline-block;    overflow : hidden;margin-right: 0px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;color: #444444;font-size: 0.32rem;margin-bottom: 0.25rem;}

        .list1{width: 100%;height: auto}
        .list1 li{width: 100%;height: 0.6rem;line-height: 0.6rem}
        .list1 li img{margin-right: 0.2rem;}


        /*夏令营*/
        .xly{width: 100%;height: 1.1rem;background: #fff;margin: 0.3rem 0px;line-height: 1.1rem;padding: 0px 0.3rem;color: #333}
        .xly b{font-size: 0.34rem;font-weight: 600;color: #FC6F44;margin-left: 0.2rem;}
        .xly a{ font-size: 0.24rem;   text-align: center;width: 1.4rem;height: 0.6rem;float: right;  line-height: 0.6rem;margin-top: 0.3rem;
            display: block;
            border-radius: 0.5rem;
            color: #fff;
            background: -webkit-linear-gradient(left,#015DB8, #01ADB8);}



        /*文字展示*/
        .pingjia{width: 100%;height: 5.56rem;background: #fff;margin-top: 0.33rem;}

        .pingjia .xq{height: 0.66rem;font-size: 0.36rem;line-height: 0.88rem;color: #333;padding-left: 0.2rem}
        .pingjia img{width: 100%;height: 0.86rem;}
        .pj-list{width: 100%;height: auto;padding: 0.2rem 0.33rem;position: relative;overflow: hidden;margin-bottom: 1.5rem;background: #fff;}
        .pj-list li{position: relative ;background: #fff;height:auto;min-height: 2rem;border-bottom: 1px solid #DEDEDE;
            margin-bottom: 0.4rem;padding-bottom: 0.2rem;}
        .pj-list p{font-size: 0.32rem;color: #424C4B;margin-bottom: 0.3rem;}
        .pj-list  .touxiang{width: 0.5rem;height: 0.5rem;border-radius: 50%;}
        .pj-list  .name{color: #04101E;position: absolute;left: 0.7rem;top: 0.1rem;}
        .pj-list  .txt{width: 100%;height: auto;display: block;margin: 0.15rem 0px;}
        .pj-list  time{color: #9C9B9C;position: absolute;top: 0.1rem;right: 0.3rem;}
        .pj-list li:last-child{border-bottom: none}


        .look{width: 2.22rem;text-align: center;line-height: 0.52rem;color: #666;
            display: inline-block;position: absolute;right: 0.2rem;top: 0.2rem;}
        .look img{width: 0.2rem;height: 0.3rem;position: relative;top: 0.05rem;margin-left: 0.05rem;}



        /*图片展示*/
        .show-img{width: 100%;height: auto;}
        .show-img li{width: 100%;height: 6.2rem}
        .show-img li img{width: 100%;height: 6.2rem}

        .btm{width: 100%;height: 1rem;position: fixed;bottom: 0px;display: flex;justify-content: center;border-top: 1px solid #DEDEDE}
        .btm a{width: 80%;height: 100%;text-align: center;line-height: 1rem;color: #333;font-size: 0.32rem;display: inline-block;background: #01B0B8;color: #fff;}
        .btm span{width: 2rem;font-size: 0.3rem;height: 100%;line-height: 1rem;text-align: right;padding-right: 0.4rem;
            box-sizing: border-box;background: #fff;}
        .btm span img{width: 0.5rem;height: 0.5rem; position: absolute;top: 0.2rem;left: 0.4rem}
    </style>
</head>
<body>
<div class="content">
    <div class="top">
        <h4>活动详情
            <img src="__PUBLIC__/Home/img/tg-fanhui.png" alt="" class="back">
        </h4>

        <!--轮播区域-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
              <volist name="img" id="vo">
                <div class="swiper-slide"><img src="http://{$_SERVER[HTTP_HOST]}{$vo.path}" alt="" ></div>
              </volist>  
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>

    </div>



    <div class="center">
         <span class="title duohang">{$detail.title}</span>

        <ul class="list1">
            <li><img src="__PUBLIC__/Home/img/p-hd-t1.png" alt="">{$detail.start|date='Y-m-d H:i:s',###} 至  {$detail.end|date='Y-m-d H:i:s',###}</li>
            <li><img src="__PUBLIC__/Home/img/p-hd-t2.png" alt="">还剩{$end|getCountDay}</li>
            <li><img src="__PUBLIC__/Home/img/p-hd-t3.png" alt="">{$detail.location}</li>
            <li><img src="__PUBLIC__/Home/img/p-hd-t4.png" alt="">{$detail.age}</li>
            <li><img src="__PUBLIC__/Home/img/p-hd-t5.png" alt="">{$detail.tel}</li>
        </ul>

    </div>
<!--夏令营报名-->
    <div class="xly">
       夏令营 <b>￥{$detail.money}</b>（剩余 <span>{$detail.nuns}</span>个名额）<if condition="$is_a eq 1"><a href="javascript:;" onclick="alert('您已经报过了')">已报名</a><else />
       <a href="javascript:;" onclick="toActivi({$detail.id})">报名</a></if>
    </div>


    <div class="pingjia">
        <p class="xq">活动详情</p>
            {$detail.detail}
        <!-- <ul class="show-img">
            <li><img src="images/tuijan-1.png" alt="" class="item_img" ></li>
            <li><img src="images/tuijan-1.png" alt="" class="item_img"></li>
            <li><img src="images/tuijan-1.png" alt="" class="item_img"></li>

        </ul> -->
        <ul class="pj-list">
            <p>评价({$nums})</p>
            <a href="{:U('Activity/comment',array('id'=>$detail[id]))}" class="look">查看全部 <img src="__PUBLIC__/Home/img/back-right.png" alt=""></a>
            <volist name="com" id="vo">
                <li>
                    <img src="{$vo.head_pic}" alt="" class="touxiang">
                    <span class="name">{$vo.user_name}</span>
                    <span class="txt">{$vo.com}</span>
                    <time>{$vo.time}</time>
                </li>
            </volist>
        </ul>



        <div class="btm">
            <span class="sc" data-stu={$is_c} data-id={$detail.id}><img src="__PUBLIC__/Home/img/<if condition="$is_c eq 0">sc1<else />sc1.1%20</if>.png" alt="" class="sc1">收藏</span>
            <if condition="$is_a eq 1"><a href="javascript:;" onclick="alert('您已经报过了')">已报名</a><elseif condition="$is_a eq 0" />
            <a href="javascript:;" onclick="toActivi({$detail.id})">立即报名</a>
            <else /><a href="javascript:;">活动已过期</a>
            </if>
       </div>
    </div>




</div>

<script src="__PUBLIC__/Home/js/jquery-1.11.1.js"></script>
<script src="__PUBLIC__/Home/js/swiper-3.4.2.min.js"></script>
<script src="__PUBLIC__/Home/js/look-img.js"></script>
<script src="__PUBLIC__/Home/layer_m/layer.js"></script>
<script>
        function toActivi(id){
           $.ajax({
            url:"{:U('Activity/JoinAcity')}",
            dataType:'json',
            method:'post',
            data:{
                id:id
            },
            success:function(data){
                layer.open({
                    content:data.msg
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                  });
            }
           })
        }
    $(".back").click(function () {
        window.history.back(-1);
    })
    $(".sc").click(function () {
        let src=$(this).children(".sc1").attr("src");
        let sel= "__PUBLIC__/Home/img/sc1.1%20.png";
        if(src==sel){
            $(this).children(".sc1").attr("src","__PUBLIC__/Home/img/sc1.png")
        }else{
            $(this).children(".sc1").attr("src",sel)
        }

        let sta=$(this).attr('data-stu');
        if(sta==1){
            var ss=0
            $(this).attr('data-stu',0);
        }
        else {
            var ss=1
            $(this).attr('data-stu',1);
        }

        $.ajax({
            url:"{:U('Activity/changecoll')}",
            dataType:'json',
            method:'post',
            data:{
                id:$(this).attr('data-id'),
                sta:ss
            },
            success:function(data){
                layer.open({
                    content:data.msg
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                  });
            }
        })

    })

</script>
<script>

    var swiper = new Swiper('.swiper-container', {
        autoplay:3000,
        loop:true,
        pagination: '.swiper-pagination',

    });

</script>




</body>
</html>